
<div class="bg-secondary text-light">
<h2 class="text-center ">
  九宫格</h2>

<!--  -->


<div class="container-fluid text-center ">

  <div *ngFor="let i of [0,1,2]" class="row">
    <div *ngFor="let j of [0,1,2]" 
    [ngbTooltip]="tipContent"
      class="col jg3x3">
      <ng-template #tipContent><b>{{(i + 1) + " " + (j + 1)}}</b></ng-template>
      <div *ngFor="let k of [0,1,2]" class="row">
        <div *ngFor="let l of [0,1,2]" class="col"
        
        >
          <div 
          (click)="editNumber(i * 3 + k, j * 3 + l)" 
          [ngClass]="setCellClass(i * 3 + k, j * 3 + l)"
          
          >{{jgData[i * 3 + k][j * 3 + l]}}</div>
        </div>

      </div>
    </div>
  </div>
  <!-- <hr /> -->
  <br />
  <div class="row">
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">
      <button class="btn btn-lg btn-outline-primary" (click)="process()">开  始</button>
    </div>
    <div class="col">

      <button class="btn btn-lg btn-outline-primary" (click)="reset()">重  置</button>
    </div>
    <div class="col">
      <pre>{{closeResult}}</pre>
    </div>
  </div>
  <br />
</div>
</div>

